import React from 'react';
import { connect } from 'react-redux';
// import { parseQueryString } from './../../utils';
import * as actions from './../../actions/a_trumpCourse';
// import { Link } from 'react-router-dom';
import { TimeIcon, CoordIcon} from './../../icons';
import moment from 'moment';

const Course = (props) => {
  return <div className='course'>
    <div className='course-info'>
      <h3>{props.qici}</h3>
      <p><TimeIcon/>开课日期: {props.time}</p>
      <p><CoordIcon/>{props.city}</p>
    </div>
    <input type='button' value='报名'/>
  </div>
}

const MonthCourses = (props) => {
  let monthData = props.data;
  let monthItems = monthData.map((item, index) => {
    let time = moment(+item.beginTime).format('MM月DD日');
    return <Course qici={item.qici} time={time} city={item.cityName} key={index+''}/>
  })
  return <div className='month-courses'>
    <h2>{props.month}</h2>
    {monthItems}
  </div>
}

class TrumpCourseView extends React.Component {

  componentDidMount() {
    document.title='课程预约';
  }

  render() {
    let {
      state = []
    } = this.props;
    let divs = state.map((item, index) => {
      return <MonthCourses key={index+''} month={item.tag} data={item.data}/>
    })
    return <div className='trump-course'>
      {divs}
      <p>查看更多</p>
    </div>
  }
}

export default connect( (store) => {
  return {
    ...store.trumpCourse
  }
}, {
  ...actions
})(TrumpCourseView);